<!-- 横向滚动组件 -->
<template>
    <div class="cardBox">
        <div class="positionBox">
            <div class="arrow left-arrow" @click="scrollLeft">&lt;</div>
            
            <div class="product-list" ref="productList">
                <div v-for="(item, index) in products" :key="index"
                    :style="{ opacity: selectedIndex == index ? '1' : '0.5' }" class="product-item">
                    <div class="forTitleBox">{{ item.dictLabel }}</div>
                </div>
            </div>

            <div class="arrow right-arrow" @click="scrollRight">&gt;</div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from 'vue'
const emit = defineEmits(['selectedChange'])
// 定义接收的props
const props = defineProps({
    products: {
        type: Array,
        default: []
    },
});
const selectedIndex = ref(0)
const productList = ref(null)
let itemWidth = 0
let maxScroll = 0
// 初始化计算
const initSlider = () => {
    if (productList.value && productList.value.children[0]) {
        const firstItem = productList.value.children[0]
        itemWidth = firstItem.offsetWidth
        maxScroll = productList.value.scrollWidth - productList.value.clientWidth
    }
}
// 向左滚动
const scrollLeft = () => {
    if (!productList.value) return
    if (selectedIndex.value == 0) return
    selectedIndex.value -= 1
    const currentScroll = productList.value.scrollLeft
    const newScroll = Math.max(currentScroll - itemWidth, 0) // 确保不小于0
    productList.value.scrollTo({
        left: newScroll,
        behavior: 'smooth'
    })
    emit('selectedChange', props.products[selectedIndex.value])
}
// 向右滚动
const scrollRight = () => {
    if (!productList.value) return
    if (selectedIndex.value == props.products.length - 1) return
    selectedIndex.value += 1
    const currentScroll = productList.value.scrollLeft
    const newScroll = Math.min(currentScroll + itemWidth, maxScroll) // 确保不超过最大值
    productList.value.scrollTo({
        left: newScroll,
        behavior: 'smooth'
    })
    
    console.log('newScroll', props.products[selectedIndex.value]);
    
    emit('selectedChange', props.products[selectedIndex.value])
}

// 生命周期钩子
onMounted(() => {
    initSlider()
    window.addEventListener('resize', initSlider)
})
</script>

<style scoped lang="scss">
.cardBox {
    width: 100%;
    box-sizing: border-box;
}

.positionBox {
    position: relative;
    display: flex;
    gap: 10px;
}

.product-list {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    // width: 80%;
    // margin: 0 auto;
    // flex-shrink: 0;

}

.product-list::-webkit-scrollbar {
    display: none;
}

.product-item {
    box-sizing: border-box;
    // padding: 10px 20px;
    width: 100px;
    height: 40px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(52, 134, 206, 0) 0%, #3486CE 100%);
    border: 1px solid #45A5FF;
    cursor: pointer;
    opacity: 0.5;

    .forTitleBox {
        font-size: 14px;
        color: #fff;
    }
}

.arrow {
    // position: absolute;
    // top: 50%;
    // transform: translateY(-50%);
    flex-shrink: 0;
    color: #fff;
    width: 30px;
    height: 40px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    z-index: 1;
    background: linear-gradient(180deg, rgba(52, 134, 206, 0) 0%, #3486CE 100%);
    border: 1px solid #45A5FF;
    transition: opacity 0.3s;
}

.left-arrow {
    left: 0;
}

.right-arrow {
    right: 0;
}
</style>